<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body,
    html {
      width: 100vw;
      height: 100vh;
    }

    ul {
      list-style: none;
    }

    .tab {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 40%;
      border: 1px solid red;
      margin: 100px auto;
      display: flex;
      flex-wrap: wrap;
    }

    .tab_list {
      display: flex;
      width: 100%;
      height: 20%;
    }

    .tab_list_ul {
      display: flex;
      width: 100%;
    }

    .tab_list_ul>li {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      background-color: green;
      font-size: 1.2rem;
      border: 1px solid black;
    }

    .tab_list_ul>li:hover {
      cursor: pointer;
    }

    .tab_list_ul .tab_list_current {
      background-color: hotpink;
    }

    .tab_con {
      background-color: yellow;
      display: flex;
      flex-wrap: wrap;
      height: 80%;
      width: 100%;
    }

    .tab_con .item {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .tab_con .item:not(:first-of-type) {
      display: none;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul class="tab_list_ul">
        <li class="tab_list_current">商品介绍</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
      </ul>
    </div>

    <div class="tab_con">
      <div class="item">
        商品介绍内容: Lorem ipsum dolor sit amet, consectetur
        Unde, dolore?
      </div>
      <div class="item">
        商品介绍内容: Lorem ipsum dolor sit amet, consectetur ostrum, voluptatem laboriosam placeat ea, impedit quo!
        Unde, dolore?
      </div>
      <div class="item">
        商品介绍内容: Lorem ipsum dolor voluptatem laboriosam placeat ea, impedit quo!
        Unde, dolore?
      </div>
      <div class="item">
        我们还好么，你自己知道的了: Lorem ipsum dolor voluptate 
      </div>
    </div>
  </div>
</body>
<script>
  let tabList = document.querySelector(".tab_list");
  let lis = tabList.querySelectorAll("li");
  let items = document.querySelectorAll(".item"); 
  for (let [index, value] of lis.entries()) {
    // 给每个值设置索引号
    value.setAttribute("data-index", index);
    // 给每个li添加点击事件
    value.addEventListener("click", (e) => {
      [...lis].forEach((value, index, arrary) => { //遍历所有的li，并修改样式
        value.className = "";
      })
      // 让当前的对象颜色改变
      e.currentTarget.className = "tab_list_current";

      // 显示下面的内容
      // 获取li的索引值
      let liindex = e.currentTarget.dataset.index;
      // 让所有的div都隐藏起来
      [...items].forEach((value, index, arrary) => {
        value.style.display = "none";
      });
      // 让第几个div显示出来
      items[liindex].style.display = "block";
    });
  };
</script>

</html>